@charset "utf-8";
@import "_iconfont.scss";
*{
    margin:0;
    padding:0;
}
@function r($px){
    @return ($px/40) * 1rem;
}
@function px($px){
    @return ($px/2) *1px;
}
#web{
    width:r(750);
    height: 100%;
    position: relative;
}
header{
    width:100%;
    height:px(150);
    overflow: hidden;
    .head_logo{
        width:px(123);
        height:px(123);
        // overflow: hidden;
        margin:px(17) 0 0 r(23);
        img{
            width:100%;
        }
    }
    .searchBar{
        width:r(274);
        height:px(50);
        border:2px solid #fe9241;
        margin:px(60) auto;
        border-radius: px(50);
        font-size:0;
        padding:0 r(4) 0 r(7);
        box-sizing: border-box;
        input{
            width:calc(100% - 36px);
            height:100%;
            vertical-align:middle;
            padding:0 r(5);
            border:none;
            margin-left:px(8);
            &::-webkit-input-placeholder{
                font-size:12px;
            }
        }
        img{
            width:px(36);
            height:px(36);
            vertical-align:middle;
        }
    }
    .selectBar{
        width:px(158);
        height:px(54);
        border:1px solid #fe9241;
        margin:px(60) r(30) 0 0;
        padding-left:r(8);
        select{
            width:100%;
            height:100%;
            border:none;
            appearance: none;
            -webkit-appearance: none;
            background:#fff url("../images/triangle.png");
            background-repeat: no-repeat;
            background-position: right px(16) center;
            background-size: px(30) px(16);
            vertical-align: top;
        }
    }
}
.section{
    width:100%;
    position: absolute;
    top:px(150);
    bottom:px(150);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .section_banner{
        width:100%;
        img{
            display: block;
            width:100%;
        }
    }
    .cheap{
        width:100%;
        height:r(75);
        margin-top:r(45);
        .cheap_text{
            float:left;
            width:r(250);
            height:px(75);
            line-height:px(75);
            font-size: 16px;
            padding-left:px(120);
            background: url(../images/xing.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
        .cheap_more{
            float: right;
            width:r(116);
            height:px(75);
            font-size: 16px;
            line-height:px(75);
            padding-right:r(10);
            background: url(../images/more.png)no-repeat;
            background-size:px(38) px(38);
            background-position:right px(16) top px(18);
        }
        .love{
            background: url(../images/xin.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
    }
    .list_img{
        margin:r(28) r(90) 0 r(79);
        ul{
            width:100%;
            
            li{
                width:r(238);
                height:r(95);
                float:left;
                margin:0 r(104) r(30) 0;
                img{
                    width:100%;
                }
            }
            #list1,#list2{
                margin-right:0;
            }
        }
    }
    .love_food{
        width:100%;
        height:r(164);
        margin-bottom:r(28);
         margin-top:r(30);
        .love_left{
            float:left;
            width:r(211);
            height:r(164);
            img{
                width:100%;
                margin-left:r(20);
            }
        }
        .love_right{
            float:right;
            width:r(518);
            height:r(164);
            .love_title{
                width:100%;
                height:r(50);
                margin:r(15) 0 0 r(18);
                h4{
                    float:left;
                    font-weight: 600;
                    font-size:16px;

                }
                p{
                    float:right;
                    font-size:14px;
                    margin-right:r(33);
                    color:#666;
                }
            }
            .love_content{
                width:100%;
                height:r(56);
                line-height: r(56);
                font-size:14px;
                margin-left:r(20);
            }
            .love_last{
                width:100%;
                height:r(47);
                margin-left:r(20);
                span{
                    display: inline-block;
                    font-size:16px;
                    color:red;
                }
                #span1{
                    color:#666;
                    float:right;
                    margin-right:r(33);
                    font-size:14px;
                }
            }
        }
    }
}
footer{
    width:100%;
    height:px(150);
    position: absolute;
    bottom:0;
    li{
        width:25%;
        float:left;
        i{
            width:100%;
            height:px(100);
            line-height: px(100);
            display: block;
            text-align: center;
        }
        .iconfont{
            font-size:px(50);
            color:#fe9241;
        }
        p{
            text-align: center;
            font-size:14px;
            font-family: "微软雅黑";
            color:#000;
        }
    }
}
// 媒体查询
@media screen and (min-width:320px) and (max-width:375px){
    header{
        height:px(120);
        .head_logo{
            width:px(100);
            height:px(100);
            margin:px(10) 0 0 r(23);
            img{
                width:100%;
            }
        }
        .searchBar{
            width:r(304);
            margin:px(40) auto;
        }
        .selectBar{
            width:px(138);
            height:px(50);
            margin:px(40) r(15) 0 0;
        }
    }
    .section{
        top:px(120);
        .cheap{
            width:100%;
            height:r(75);
            margin-top:r(45);
            .cheap_text{
                font-size: 14px;
                background-size:px(70) px(68);
            }
            .cheap_more{
                font-size: 14px;
                background-position:right px(10) top px(14);
            }
            .love{
                background-size:px(70) px(68);
            }
        }
        .list_img{
            margin:r(28) r(90) 0 r(79);
            ul{
                width:100%;
                
                li{
                    width:r(258);
                    height:r(95);
                    float:left;
                    margin:0 r(64) r(30) 0;
                    img{
                        width:100%;
                    }
                }
                #list1,#list2{
                    margin-right:0;
                }
            }
        }
    }
}
@media screen and (min-width:768px){
    .section{
        .cheap{
            .cheap_text{
                font-size: 20px;
            }
            .cheap_more{
                width:r(60);
                font-size: 18px;
            }
        }
        .love_food{
            .love_right{
                .love_title{
                    h4{
                        font-size:18px;
    
                    }
                    p{
                        font-size:16px;
                    }
                }
                .love_content{
                    font-size:16px;
                }
                .love_last{
                    span{
                        font-size:18px;
                    }
                    #span1{
                        font-size:16px;
                    }
                }
            }
        }
    }
    footer{
        li{
            p{
                font-size:16px;
            }
        }
    }
}